<template>
	<view class="all">
		<div >
			<div ref="myChart2" style="width:100%;height:300px"></div>
			<div ref="myChart3" style="width:100%;height:300px"></div>
			<div ref="myChart" style="width:100%;height:300px"></div>
		</div>
	</view>
  
</template>

<script>
export default {
  name: "Chart",
  methods: {
    drawChart() {
      var echarts = require("echarts"); //引入echarts
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(this.$refs.myChart);
      let myChart2 = echarts.init(this.$refs.myChart2);
      let myChart3 = echarts.init(this.$refs.myChart3);
      //图表内容
      let option = {
              // 设置背景为白色
              backgroundColor: 'white',
              // 定义表的标题
              title: {
                text: '期末成绩'
              },
              // 定义类别
              legend: {
                data: ["成绩","平均分"]
              },
              // 定义提示类型
              tooltip: {
                trigger: 'axis',  // axis显示每一列的所有类别数据, item只显示单个类别
              },
              // 定义横坐标标签
              xAxis: {
                name: '学期',
                data: ['2020.1', '2020.6', '2021.1', '2021.6', '2022.1'],
                axisLabel: {
                  show: true,
                  textStyle: {
                    color: 'black',  //更改X坐标轴文字颜色
                    fontSize : 16      //更改坐标轴文字大小
                  }
                }
              },
              // 定义纵坐标尺度，一般会自己变化
              yAxis: {
                name: '成绩',
                axisLabel: {
                  show: true,
                  textStyle: {
                    color: 'black',  //更改Y坐标轴文字颜色
                    fontSize : 16      //更改坐标轴文字大小
                  }
                }
              },
              // 定义每个标签对应类别的数值
              series: [
                {
                name: '成绩',
                type: 'bar', // bar为条状图
                color: ['#12754F'], // 设置背景颜色
                data: [75, 85, 81, 98, 95,]
                },
                {
                  name: '平均分',
                  type: 'line', // line为折线图
                  color: ['#ff0000'],
                  data: [70, 72, 76, 85, 88]
                },
              ]
            } ;
      let option2 = {
        title: {
          text: "等级",
        },
        tooltip: {},
        //图例组件：展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
        legend: {
          orient: "vertical",
          x: "right", //可设定图例在左、右、居中
          y: "top", //可设定图例在上、下、居中
          padding: [0, 0, 0, 400], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
          data: ["A等级", "B等级", "C等级", "D等级", "E等级"],
        },
        series: [
          {
            name: "访问来源",
            type: "pie", // 设置图表类型为饼图
            radius: "55%", // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
            roseType: "angle", //也可以通过设置参数把饼图显示成南丁格尔图。
            data: [
              // 数据数组，name 为数据项名称，value 为数据项值
              { value: 235, name: "A等级" },
              { value: 274, name: "B等级" },
              { value: 310, name: "C等级" },
              { value: 335, name: "D等级" },
              { value: 400, name: "E等级" },
            ],
          },
        ],
      };
      let option3 = {
        title: {
          text: "得分来源",
        },
        color: ["#00aa7f", "#FDFDE3", "#aa55ff", "#A6FFE5", "#ffaa7f"],
        tooltip: {},
        legend: {
          x: "46%",
          y: "28%",
          orient: "vertical",
          data: ["高数", "线代", "大物", "专业课", "其他"],
          formatter: function(name) {
            var index = 0;
            var clientlabels = ["高数", "线代", "大物", "专业课", "其他"];
            var clientcounts = [40, 15, 10, 25, 20];
            clientlabels.forEach(function(value, i) {
              if (value == name) {
                index = i;
              }
            });
            return name + "  " + clientcounts[index];
          },
        },

        calculable: false,
        series: [
          {
            name: "myCharts",
            type: "pie",
            //radius: "50%", // 设置为圆饼
            radius: ["30%", "60%"], // 设置环形饼状图， 第一个百分数设置内圈大小，第二个百分数设置外圈大小
            center: ["25%", "47%"], // 设置饼状图位置，第一个百分数调水平位置，第二个百分数调垂直位置

            startAngle: 90, //开始旋转的角度

            itemStyle: {
              normal: {
                label: {
                  show: false,
                  position: "inner",
                },
                labelLine: {
                  show: false,
                },
              },
            },
            /*
             itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: "outer",
                },
                labelLine: {
                  show: true,
                },
              },
            },
            */
            data: [
              { value: 40, name: "高数" },
              { value: 15, name: "线代" },
              { value: 20, name: "大物" },
              { value: 25, name: "专业课" },
              { value: 10, name: "其他" },
            ],
          },
        ],
      };
      // 绘制图表
      myChart.setOption(option);
      myChart2.setOption(option2);
      myChart3.setOption(option3);
    },
  },
  mounted() {
    //在mounted中调用,确保myChart需要展示的标签渲染出来
    this.$nextTick(() => {
      setTimeout(() => {
        this.drawChart();
      });
    });
  },
};
</script>

<style>
	.all{
		width: 100vw;
	}
</style>

